const PropTypes = require('prop-types');
const React = require('react');
const { View, StyleSheet, Platform } = require('react-native');
const {
    JDTouchable,
    JDText,
    JDRouter,
    JDButton,
    JDDevice
} = require('@areslabs/jdreact-core-lib');
import UFO from './UFO';
const { NavigationBar } = JDRouter;

class ViewExample extends React.Component {
    static contextTypes = {
        router: PropTypes.object
    };

    UNSAFE_componentWillMount() {
        if(Platform.OS !== 'web'){
            if(this.context.router.getCurrentRoutes().length > 3) {
                this.context.router.deleteRoutes(2,1);
            }
        }

    }
    componentDidMount() {

    }
    handleCLick = () => {
        this.fly();
    }
    fly = () => {
        this.timer = setTimeout(() => {
            var startOffset = {
                x: 30,
                y: 70
            };
            var endOffset = {
                x: 300,
                y: 250
            };
            this.refs.ufo.fly && this.refs.ufo.fly(startOffset, endOffset);
        }, 30);
    }
    goBack = () =>{
        this.context.router.goBack();
    }
    render() {
        let moreNavList = [
            {
                icon: { uri: 'https://st.360buyimg.com/m/images/index/a-home.png' },
                text: '消息',
                handler: () => { alert('消息') },
            },
            {
                icon: { uri: 'https://st.360buyimg.com/m/images/index/n-catergry.png' },
                text: '分类',
                handler: () => { alert('分类') },
            },
            {
                icon: { uri: 'https://st.360buyimg.com/m/images/index/n-cart.png' },
                text: '购物车',
                handler: () => { alert('购物车') },
            },
            {
                icon: { uri: 'https://st.360buyimg.com/m/images/index/n-me.png' },
                text: '我的',
                handler: () => { alert('我的') },
            },
        ]

        return (
            <View style={styles.wrapper} >
                <NavigationBar Title="View组件"
                    showMoreNav={true}
                    moreNavList={moreNavList}
                    titleStyle={{color: 'pink'}}
                    navStyle={{ backgroundColor: '#D0FFE2'}}
                    LeftButton={()=>{
                        return (
                            <JDTouchable onPress={this.goBack} style={{marginLeft: 10}}>
                                <JDText>返回</JDText>
                            </JDTouchable>
                        )
                    }}
                    RightButton={()=>{
                        return (
                            <View style={{ marginRight: 10 }} key={1}>
                                <JDText>分享</JDText>
                            </View>
                        )
                    }}
                    renderMoreNavList={()=>{
                        return (
                            <View style={{ backgroundColor: '#FFF',width: 120, height: 40, marginTop: 5, justifyContent: 'center', alignItems: 'center'}}>
                                <JDText>自定义按钮</JDText>
                            </View>
                        )
                    }}
                />
                <View style={styles.content}>
                    <JDText>
                        作为创建UI时最基础的组件，View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。
                    </JDText>
                    <View>
                        <JDButton onPress={this.handleCLick}>点击动画</JDButton>
                        <UFO ref="ufo"/>
                    </View>
                    <JDText style={{ marginTop: 30 }}>flex-direction: row</JDText>
                    <JDText>横向布局</JDText>
                    <View style={styles.rowStyle}>
                        <View style={styles.greenBlock} />
                        <View style={styles.blueBlock} />
                        <View style={styles.grayBlock} />
                    </View>
                    <JDText>flex-direction: column</JDText>
                    <JDText>纵向布局(默认)</JDText>
                    <View style={styles.columnStyle}>
                        <View style={styles.greenBlock} />
                        <View style={styles.blueBlock} />
                        <View style={styles.grayBlock} />
                    </View>
                </View>
                <JDButton onPress = {
                    () => {
                        if(Platform.OS === 'web'){
                            this.context.router.push('example-JDText')
                        }else{
                            this.context.router.push({
                                routeName: 'example-JDText'
                            });
                        }
                    }
                }>点击push JDText</JDButton>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,

    },
    content: {
        paddingTop: 10,
        paddingLeft: 10,
        paddingRight: 10,
        // borderWidth:2,
        borderColor: '#CCC',
        borderRadius:JDDevice.getRpx(200),
    },
    rowStyle: {
    //   borderWidth:2,
      borderColor: '#CCC',
      borderRadius:JDDevice.getRpx(200),
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        height: 80
    },
    columnStyle: {
    //   borderWidth:2,
      borderColor: '#CCC',
      borderRadius:JDDevice.getRpx(200),
        justifyContent: 'center',
        alignItems: 'center',
        height: 160
    },
    greenBlock: {
        width: 40,
        height: 40,
        backgroundColor: 'green',
    },
    blueBlock: {
        width: 40,
        height: 40,
        backgroundColor: 'blue',
    },
    grayBlock: {
        width: 40,
        height: 40,
        backgroundColor: 'gray',
    },

});

module.exports = ViewExample;
